<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="index.css" />
		<link rel="stylesheet" type="text/css" href="relext.css" />
	</head>
	<body>
		<!-- header -->
		<div class="header">
			<img src="img/logo.png">
			<div class="header-one">
				<a href="login.html">登录&nbsp;&nbsp;|</a>
				<a href="register.html">&nbsp;注册&nbsp;&nbsp;|</a>
				<a href="shopping.html">&nbsp;购物车</a>
			</div>
		</div>
		<!-- banner -->
		<div class="banner">
			<div class="banner-one" id="oImg">
				<input type="button" id="btn1" value="<" />
				<input type="button" id="btn2" value=">" />
				<ul>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
		</div>
		<!-- 搜索框 -->
		<div class="search">
			<img src="img/ico-reach.png">
			<input type="search" class="search-ipt" placeholder="商品搜索:请输入商品关键字" />
		</div>
		<!-- 首页固定图 -->
		<div class="fixed">
			<img src="img/cheesecake.jpg" class="cheesecake">
			<img src="img/chickabiddy.jpg" class="chickabiddy">
		</div>
		<!-- footer -->
		<div class="footer">
			<div class="footer-one"><a href="Holiland.html">主页</a></div>
			<div class="footer-two">
				<a class="footer-two1" id="footertwo1">产品</a>
				<ol class="footer-two2" id="footertwo2">
					<a href="XPXLcake.html">
						<li>新品系列</li>
					</a>
					<a href="Children.html">
						<li>儿童系列</li>
					</a>
					<a href="ZAXLcake.html">
						<li>珍爱系列</li>
					</a>
					<a href="Zunaicake.html">
						<li>尊爱系列</li>
					</a>
					<a href="HFQDcake.html">
						<li>和风钦点</li>
					</a>
				</ol>
			</div>
			<div class="footer-three"><a href="HFQDcake.html">和风钦点</a></div>
			<div class="footer-four">
				<a id="footerhelp">帮助中心</a>
				<ol class="footer-four1" id="footerfour1">
					<a href="login.html">
						<li>会员中心</li>
					</a>
					<a href="Stores.html">
						<li>门店列表</li>
					</a>
					<a href="Stores.html">
						<li>好利来招聘</li>
					</a>
				</ol>
			</div>
		</div>
	</body>
</html>
<script src="jQuery.js"></script>
<script>
	let i = 0;
	$("li").eq(0).css({
		background: "red"
	});
	$("#btn2").click(function() {
		if (i < 4) {
			i++;
		} else {
			i = 0;
		}
		$("#oImg").css({
			background: "url(img/" + i + ".jpg) no-repeat",
			backgroundSize: "722px 329px"
		});
		$("li").css({
			background: "white"
		});
		$("li").eq(i).css({
			background: "red"
		});
	})
	$("#btn1").click(function() {
		if (i > 0) {
			i--;
		} else {
			i = 4;
		}
		$("#oImg").css({
			background: "url(img/" + i + ".jpg) no-repeat",
			backgroundSize: "722px 329px"
		});
		$("li").css({
			background: "white"
		});
		$("li").eq(i).css({
			background: "red"
		});
	})
</script>
<script>
	let oA = document.getElementById("footertwo1");
	let oOl = document.getElementById("footertwo2");
	let oB = document.getElementById("footerhelp");
	let oOli = document.getElementById("footerfour1");
	oA.onclick = function() {
		if (oOl.style.display == "none") {
			oOl.style.display = "block";
		} else {
			oOl.style.display = "none";
		};
	};
	oB.onclick = function() {
		if (oOli.style.display == "none") {
			oOli.style.display = "block";
		} else {
			oOli.style.display = "none";
		};
	};
</script>
